<template>
	<view>
		<image src="https://appimg.derunhuatang.com/logo/wechat/jiameng1.png" mode="widthFix" style="width: 100%;">
		</image>
		<form report-submit='true'>
			<view class='merchantsSettled'>
				<view class='list'>
					<view class="item" >
						<view class="acea-row acea-row1 row-middle">
							<text class="item-name">{{$t(`投资预算`)}}</text>
							<view style="margin-top: 20rpx;display: flex;">
									<view style="display: flex;align-items: center;" class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in touzi"
										:key="item.value" @click="radioChange(item.value)">
									 	{{item.name}}
										 <view class="kuang" :class="{'selt':item.value == current}"></view>
									</view>
							</view>
						</view>
					</view>
					<view class="item">
						<view class="acea-row  row-middle">
							<text class="item-name">{{$t(`用户姓名*`)}}</text>
							<input type="text" :placeholder="$t(`请输入姓名`)" v-model="merchantData.user_name"
								@input="validateBtn" placeholder-class='placeholder' />
						</view>
					</view>
					<view class="item">
						<view class="acea-row  row-middle">
							<text class="item-name">{{$t(`手机号*`)}}</text>
							<input type="text" :placeholder="$t(`请输入手机号`)" v-model="merchantData.user_phone"
								@input="validateBtn" placeholder-class='placeholder' />
						</view>
					</view>
					<view class="item">
						<view class="acea-row  row-middle">
							<text class="item-name">{{$t(`推荐人姓名`)}}</text>
							<input type="text" :placeholder="$t(`请输入推荐人姓名`)" v-model="merchantData.invitiver_name"
								@input="validateBtn" placeholder-class='placeholder' />
						</view>
					</view>
					<view class="item">
						<view class="acea-row row-middle">
							<text class="item-name">{{$t(`推荐人手机号`)}}</text>
							<input type="text" :placeholder="$t(`请输入推荐人手机号`)" v-model="merchantData.invitiver_phone"
								@input="validateBtn" placeholder-class='placeholder' />
						</view>
					</view>
					<view @click="formSubmit" style="text-align: center;width: 636rpx;padding: 10rpx 0; background: linear-gradient(0deg, #E7B36F 0%, #F8D294 100%);border-radius: 30px;margin: 0 auto;">
						<view style="font-size: 30rpx;">【获取方案】</view>
						<view style="text-align: center;font-size: 24rpx;">申请获取方案后，有专业客服对接！</view>
					</view>
				</view>
			</view>
		</form>
		
		<image src="https://appimg.derunhuatang.com/logo/wechat/jiameng3.png?v=23" mode="widthFix" style="width: 100%;">
		</image>
		<view @click="movetop(1)" style="text-align: center;width: 636rpx;padding: 10rpx 0; background: linear-gradient(0deg, #E7B36F 0%, #F8D294 100%);border-radius: 30px;top: -212rpx;position: relative;margin-left: 50%;left: -318rpx;">
			<view style="font-size: 30rpx;">【获取方案】</view>
			<view style="text-align: center;font-size: 24rpx;">申请获取方案后，有专业客服对接！</view>
		</view>
		
		<view @click="movetop(2)" style="text-align: center;width: 636rpx;padding: 10rpx 0; background: linear-gradient(0deg, #E7B36F 0%, #F8D294 100%);border-radius: 30px;margin-bottom: -92rpx;position: relative;margin-left: 50%;left: -318rpx;bottom: -1580rpx;">
			<view style="font-size: 30rpx;">【获取方案】</view>
			<view style="text-align: center;font-size: 24rpx;">申请获取方案后，有专业客服对接！</view>
		</view>
		<image src="https://appimg.derunhuatang.com/logo/wechat/jiameng4.png?v=123" mode="widthFix" style="width: 100%;margin-top: -102rpx;">
		</image>
		<view @click="movetop(3)" style="text-align: center;width: 636rpx;padding: 10rpx 0; background: linear-gradient(0deg, #E7B36F 0%, #F8D294 100%);border-radius: 30px;margin-top: -156rpx;position: relative;margin-left: 50%;left: -318rpx;">
			<view style="font-size: 30rpx;">【获取方案】</view>
			<view style="text-align: center;font-size: 24rpx;">申请获取方案后，有专业客服对接！</view>
		</view>
	</view>
</template>
<script>
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		getGoodsDetails,
		create
	} from '@/api/agent.js';

	import {
		mapGetters
	} from "vuex";
	// #ifdef MP
	import authorize from '@/components/Authorize';
	// #endif
	import colors from "@/mixins/color";
	const app = getApp();
	export default {
		components: {
			// #ifdef MP
			authorize,
			// #endif
		},
		data() {
			return {

				inloading: true,
				status: -1,
				isAuto: false, //没有授权的不会自动授权
				isShowAuth: false, //是否隐藏授权
				text: this.$t(`获取验证码`),
				codeUrl: "",
				disabled: false,
				isAgree: false,
				showProtocol: false,
				isShowCode: false,
				loading: false,
				merchantData: {
					is_card_number: "",
					id: '',
					real_name: "",
					detail: '',
					level_type: 0,
					phone: "",
					join_account_number: '',
					join_account_password: ''
				},
				validate: false,
				successful: false,
				keyCode: "",
				codeVal: "",
				protocol: app.globalData.sys_intention_agree,
				timer: "",
				index: 0,
				index1: 0,
				mer_classification: "",
				mer_storeType: '',
				images: [],
				tagStyle: {
					img: 'width:100%;display:block;',
					table: 'width:100%',
					video: 'width:100%'
				},
				mer_i_id: null, // 店长申请id
				isType: false,
				id: 0,
				touzi: [{
						value: '1',
						name: '5万'
					},
					{
						value: '2',
						name: '10万'
					},
					{
						value: '3',
						name: '20万'
					},
					{
						value: '4',
						name: '20万以上'
					}
				],
				current: 0
			};
		},
		computed: mapGetters(['isLogin']),
		onLoad(options) {
			if (this.isLogin) {
				this.$nextTick(function() {
					this.getGoodsDetails();
				})
			} else {
				// #ifdef H5 || APP-PLUS
				toLogin();
				// #endif 
				// #ifdef MP
				this.isAuto = true;
				this.$set(this, 'isShowAuth', true)
				// #endif
			}
			if (options.id) {
				this.id = id
				uni.showLoading({
					title: this.$t(`正在加载中`),
				});
			}
		},
		onShow() {},
		onShareAppMessage(res) { //发送给朋友
					return {
						title: '固乾堂招商加盟',
						// imageUrl:,
					}
				},
		onShareTimeline(res) { //分享到朋友圈
			return {
				title: '固乾堂招商加盟',
				// imageUrl: this.thumb,
			}
		},
		methods: {
			movetop(e){
				// let live=e==1?100:e==2?1000:1500;
				uni.pageScrollTo({
					scrollTop: 400,
					duration: 300
				});
			},
			radioChange: function(e) {
				this.current = e;
			},
			// 获取历史提交数据详情123
			getGoodsDetails() {
				// getGoodsDetails({
				// 	uid: this.$store.getters.uid
				// }).then(res => {
				// 	console.log(res)
				// 	this.status = res.data.status ? res.data.status : res.data.is_send;
				// 	let resData = res.data
				// 	if (res.data.status !== -1) {
				// 		let arr = Object.keys(this.merchantData)
				// 		arr.map(item => {
				// 			this.merchantData[item] = resData[item]
				// 		});
				// 	}
				// 	this.inloading = false
				// })
			},

			// 授权回调
			onLoadFun: function() {
				this.isShowAuth = false;
			},
			// 授权关闭
			authColse: function(e) {
				this.isShowAuth = e
			},
			toggleTab(str) {
				this.$refs[str].show();
			},
			// 首页
			goHome() {
				uni.switchTab({
					url: '/pages/index/index'
				});
			},
			applyAgain() {
				this.status = -1
			},
			formSubmit: function(e) {
				let that = this;
				if (that.validateForm() && that.validate) {
					let requestData = {
						uid: this.$store.state.app.uid,
						user_name: that.merchantData.user_name,
						user_phone: that.merchantData.user_phone,
						investment: that.touzi[that.current-1].name,
						invitiver_name: that.merchantData.invitiver_name,
						invitiver_phone: that.merchantData.invitiver_phone
					}
					uni.request({
						url:'https://agent.derunhuatang.com/api/join/add_investment',
						method:'POST',
						data:requestData,success: (res) => {
							console.log(res)
							that.$util.Tips({
								title: res.data.msg
							});
							// if(res.data.status){
								
							// }
						}
					})

				}


			},
			validateBtn: function() {
				let that = this,
					value = that.merchantData;
				if (value.user_name && value.user_phone && /^1(3|4|5|7|8|9|6)\d{9}$/i.test(value
						.user_phone) &&
					value.code && that.isAgree && value.classification) {
					if (!that.isShowCode) {
						that.validate = true;
					} else {
						if (that.codeVal) {
							that.validate = true;
						} else {
							that.validate = false;
						}
					}

				}
			},

			validateForm: function() {
				let that = this,
					value = that.merchantData;
				if (that.current==0) return that.$util.Tips({
					title: that.$t(`请选择您的投资预算`)
				});
				if (!value.user_name) return that.$util.Tips({
					title: that.$t(`请输入您的姓名`)
				});
				if (!value.user_phone) return that.$util.Tips({
					title: that.$t(`请输入您的手机号`)
				});
				if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(value.user_phone)) return that.$util.Tips({
					title: that.$t(`请输入正确的手机号码`)
				});
				that.validate = true;
				return true;
			},
			jumpToList() {
				uni.navigateTo({
					url: "/pages/store/applicationRecord/index"
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	
	.kuang{
		border:1rpx solid #9B4D31;
		width: 26rpx;
		height: 26rpx;
		margin: 0 25rpx 0 10rpx;
		&.selt{
			background: url(https://appimg.derunhuatang.com/logo/wechat/selts.png) no-repeat center;
			background-size: 80%;
		}
	}
	image {
		margin-bottom: -10rpx;
	}

	.uni-input-placeholder {
		color: #B2B2B2;
	}

	.item-name {
		width: 190rpx;
		// margin-bottom:30rpx ;
	}

	.uni-list-cell {
		margin-right: 20rpx;
		position: relative;

		.iconfont {
			font-size: 14px;
			color: #7a7a7a;
			position: absolute;
			right: 15px;
			top: 7rpx;
		}

		.icon-guanbi2 {
			right: 35px;
		}
	}

	// .merchantsSettled {
	// 	background: linear-gradient(#fd3d1d 0%, #fd151b 100%);
	// 	height: 140vh;
	// }

	.merchantsSettled .merchantBg {
		width: 750rpx;
		width: 100%;
	}
.merchantsSettled{
	background: url(https://appimg.derunhuatang.com/logo/wechat/jiameng2.png) no-repeat;
	background-size: 100%;
		height: 1618rpx;
		width: 100%;
		padding: 22px 25rpx;
}
	.merchantsSettled .list {
		background-color: #FFF9EB;
		// border-radius: 20rpx;
		border-radius: 20rpx;
		// margin-tpp:30rpx;
		color: #823B1C;
    margin-top: 110rpx;
	 padding: 40rpx 0;
		// position: absolute;

		// top: 30rpx;
		// margin-top: -160px;
		// width: calc(100% - 30px);
	}

	.application-record {
		position: absolute;
		display: flex;
		align-items: center;
		top: 240rpx;
		right: 0;
		color: #fff;
		font-size: 22rpx;
		background-color: rgba(0, 0, 0, 0.3);
		padding: 8rpx 18rpx;
		border-radius: 20px 0px 0px 20px;
	}

	.merchantsSettled .list .item {
		padding: 15rpx 0;
		// border-bottom: 1rpx solid #eee;
		position: relative;
		margin: 0 20px;

		&.no-border {
			border-bottom: none;
			padding-left: 0;
			padding-right: 0;
		}

		.item-title {
			color: #666666;
			font-size: 28rpx;
			display: block;
		}

		.item-desc {
			color: #B2B2B2;
			font-size: 22rpx;
			display: block;
			margin-top: 9rpx;
			line-height: 36rpx;
		}
	}

	.acea-row1 {
		display: block;
	}

	.upload {
		display: -webkit-box;
		display: -moz-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-lines: multiple;
		-moz-box-lines: multiple;
		-o-box-lines: multiple;
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
	}

	.upload {
		margin-top: 20rpx;
	}

	.acea-row.row-middle {
		-webkit-box-align: center;
		-moz-box-align: center;
		-o-box-align: center;
		-ms-flex-align: center;
		-webkit-align-items: center;
		align-items: center;
		padding-left: 2px;
	}

	.acea-row.row-column {
		-webkit-box-orient: vertical;
		-moz-box-orient: vertical;
		-o-box-orient: vertical;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
	}

	.acea-row.row-center-wrapper {
		-webkit-box-align: center;
		-moz-box-align: center;
		-o-box-align: center;
		-ms-flex-align: center;
		-webkit-align-items: center;
		align-items: center;
		-webkit-box-pack: center;
		-moz-box-pack: center;
		-o-box-pack: center;
		-ms-flex-pack: center;
		-webkit-justify-content: center;
		justify-content: center;
	}

	.merchantsSettled .list .item .pictrue {
		width: 130rpx;
		height: 130rpx;
		margin: 24rpx 22rpx 0 0;
		position: relative;
		font-size: 11px;
		display: flex;
		color: #bbb;

		&:nth-child(4n) {
			margin-right: 0;
		}

		&:nth-last-child(1) {
			border: 0.5px solid #ddd;
			box-sizing: border-box;
		}


		uni-image,
		image {
			width: 100%;
			height: 100%;
			border-radius: 1px;

			img {
				-webkit-touch-callout: none;
				-webkit-user-select: none;
				-moz-user-select: none;
				display: block;
				position: absolute;
				top: 0;
				left: 0;
				opacity: 0;
				width: 100%;
				height: 100%;
			}
		}

		.icon-guanbi1 {
			font-size: 33rpx;
			position: absolute;
			top: -10px;
			right: -10px;
		}
	}

	.uni-list-cell-db {
		position: relative;
	}

	.wenhao {
		width: 34rpx;
		height: 34rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		border-radius: 50%;
		background: #E3E3E3;
		color: #ffffff !important;
		margin-left: 4rpx;
		position: absolute;
		left: 122rpx;
	}

	.merchantsSettled .list .item .imageCode {
		position: absolute;
		top: 7px;
		right: 0;
	}

	.merchantsSettled .list .item .icon {
		font-size: 40rpx;
		color: #b4b1b4;
	}

	.merchantsSettled .list .item input {
		// width: 400rpx;
		font-size: 30rpx;
		padding: 20rpx;
		// background-color: #F7F8FA;
		border-radius: 20rpx;

		// margin-top: 30rpx;
		// margin-left: 30px;
	}

	.merchantsSettled .list .item .placeholder {
		color: #b2b2b2;
	}

	.merchantsSettled .default {
		padding: 0 30rpx;
		height: 90rpx;
		background-color: #fff;
		margin-top: 23rpx;
	}

	.address {
		padding: 20rpx;
		background-color: #F7F8FA;
		border-radius: 20rpx;
	}

	.merchantsSettled .default checkbox {
		margin-right: 15rpx;
	}

	.merchantsSettled .acea-row uni-image {
		width: 20px;
		height: 20px;
		display: block;
	}

	.merchantsSettled .list .item .codeIput {
		width: 125px;
	}

	.uni-input-input {
		display: block;
		height: 100%;
		background: none;
		color: inherit;
		opacity: 1;
		-webkit-text-fill-color: currentcolor;
		font: inherit;
		line-height: inherit;
		letter-spacing: inherit;
		text-align: inherit;
		text-indent: inherit;
		text-transform: inherit;
		text-shadow: inherit;
	}

	.merchantsSettled .list .item .code {
		position: absolute;
		width: 93px;
		line-height: 27px;
		border: 1px solid #E93323;
		border-radius: 15px;
		color: #E93323;
		text-align: center;
		bottom: 8px;
		right: 0;
		font-size: 12px;
	}

	.merchantsSettled .list .item .code.on {
		background-color: #bbb;
		color: #fff;
		border-color: #bbb;
	}

	.merchantsSettled .submitBtn {
		width: 710rpx;
		margin: 0 auto;
		height: 86rpx;
		border-radius: 25px;
		text-align: center;
		line-height: 86rpx;
		font-size: 15px;
		color: #fff;
		background: #E3E3E3;
		margin-top: 25px;
	}

	.merchantsSettled .submitBtn.on {
		background: #12C287;
	}

	uni-checkbox-group,
	.settleAgree {
		display: inline-block;
		font-size: 24rpx;
	}

	uni-checkbox-group {
		color: #b2b2b2;
	}

	.settleAgree {
		color: #E93323;
		position: relative;
		top: 2px;
		left: 8px;
	}

	.merchantsSettled uni-checkbox .uni-checkbox-wrapper {
		width: 30rpx;
		height: 30rpx;
		border: 2rpx solid #C3C3C3;
		border-radius: 15px;
	}

	.settlementAgreement {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background: rgba(0, 0, 0, .5);
		z-index: 10;
	}

	.settlementAgreement .setAgCount {
		background: #fff;
		width: 656rpx;
		height: 458px;
		position: absolute;
		top: 50%;
		left: 50%;
		border-radius: 12rpx;
		-webkit-border-radius: 12rpx;
		padding: 52rpx;
		-webkit-transform: translate(-50%, -50%);
		-moz-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		overflow: hidden;

		.content {
			height: 900rpx;
			overflow-y: scroll;

			/deep/ p {
				font-size: 13px;
				line-height: 22px;
			}

			/deep/ img {
				max-width: 100%;
			}
		}
	}

	.settlementAgreement .setAgCount .icon {
		font-size: 42rpx;
		color: #b4b1b4;
		position: absolute;
		top: 15rpx;
		right: 15rpx;

	}

	.settlementAgreement .setAgCount .title {
		color: #333;
		font-size: 32rpx;
		text-align: center;
		font-weight: bold;
	}

	.settlementAgreement .setAgCount .content {
		margin-top: 32rpx;
		color: #333;
		font-size: 26rpx;
		line-height: 22px;
		text-align: justify;
		text-justify: distribute-all-lines;
		height: 756rpx;
		overflow-y: scroll;
	}

	.settledSuccessMain {
		height: 100vh;
		display: flex;
		flex-direction: column;
		background: #fff;
	}

	.settledSuccessful {
		flex: 1;
		width: 100%;
		padding: 0 56px;
		height: auto;
		background: #fff;
		text-align: center;
	}

	.settledSuccessful .image {
		width: 189px;
		height: 157px;
		margin-top: 66px;
	}

	.settledSuccessful .title {
		color: #333333;
		font-size: 16px;
		font-weight: bold;
		margin-top: 35px;
	}

	.settledSuccessful .info {
		color: #999;
		font-size: 26rpx;
		margin-top: 18rpx;
	}

	.settledSuccessful .goHome {
		margin: 20px auto 0;
		line-height: 43px;
		color: #282828;
		font-size: 15px;
		border: 1px solid #B4B4B4;
		border-radius: 60px;
	}

	.settledSuccessful .again {
		margin: 30px auto 0;
		line-height: 43px;
		color: #fff;
		font-size: 15px;
		background-color: #E93323;
		border-radius: 60px;
	}

	/deep/ uni-checkbox .uni-checkbox-input {
		width: 15px;
		height: 15px;
		position: relative;
	}

	/deep/ uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked:before {
		font-size: 14px;
	}

	/deep/ uni-checkbox .uni-checkbox-input-checked {
		background-color: #fd151b !important;
	}

	.loadingicon {
		height: 100vh;
		overflow: hidden;
		position: absolute;
		top: 0;
		left: 0;
	}

	.icon-xiangyou {
		font-size: 22rpx;
	}

	// #ifdef MP
	checkbox-group {
		display: inline-block;
	}

	// #endif
	.setAgCount {
		/deep/ table {
			border: 1rpx solid #DDD;
			border-bottom: none;
			border-right: none;
		}

		/deep/ td,
		th {
			padding: 5rpx 10rpx;
			border-bottom: 1rpx solid #DDD;
			border-right: 1rpx solid #DDD;
		}
	}
</style>